<template>
	<view>
		<hx-navbar ref="hxnb" :config="config">
			<block slot="max">
				<view class="nav_wrap flex">
					<view class="back_wrap flex" @click="back">
						<u-icon name="arrow-left" color="#333" size="36"></u-icon>
					</view>
					<view class="page_title font_18_333">电话咨询</view>
				</view>
			</block>
		</hx-navbar>
		<view class="main-div">
			<image class="main-bg" src="../../static/img/home/c-bg.png" mode=""></image>
			<view class="zhanwei" :style="{'height':statusBarHeight+'rpx'}"></view>
			<view class="  m-d">
				<view class="u-m-t-28 u-p-l-76">
					<view class="dh-t ">
						电话沟通
					</view>
					<view class="u-m-t-38 flex">
						<image class="c1-img" src="../../static/img/home/c1.png" mode=""></image>
						<view class="font_12_333 u-m-l-10">
							超3亿人使用
						</view>
					</view>
					<view class="u-m-t-18 flex">
						<image class="c1-img" src="../../static/img/home/c1.png" mode=""></image>
						<view class="font_12_333 u-m-l-10">
							18万律师专业认证
						</view>
					</view>
				</view>
				<view class="u-m-t-70">
					<view class="jisu">
						<view class="flex flex_sb">
							<view class="font_18_FFF font_weight">极速电话咨询</view>
							<view class="flex">
								<view class="xs-t">限时特惠</view>
								<view class="">
									<span class="font_16_FFF">￥</span>
									<span class="num">{{price}}</span>
									<span  class="font_14_FFF">/次</span>
								</view>
							</view>
						</view>
						<view class="flex u-m-t-8">
							<view class=" flex">
								<image class="c1-img" src="../../static/img/home/c1-1.png" mode=""></image>
								<view class="font_12_fff u-m-l-10">
									案件紧急，海量律师快速电话回拨
								</view>
							</view>
							<view class="u-m-l-40 flex">
								<image class="c1-img" src="../../static/img/home/c1-1.png" mode=""></image>
								<view class="font_12_fff u-m-l-10">
									1对1服务
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="in-div">
					<view class="in-item">
						<view class="in-text">服务类型</view>
						<view class="input-div">
							<u-input placeholder="请选择服务类型" border type="select" v-model="type2" @click="show2 = true"  />
						</view>
					</view>
					<view class="in-item u-m-t-16">
						<view class="in-text">案件类型</view>
						<view class="input-div">
							<u-input placeholder="请选择案件类型" border type="select" v-model="type" @click="show = true"  />
						</view>
					</view>
					<view class="in-item u-m-t-16">
						<view class="in-text">所在省</view>
						<view class="input-div">
							<u-input placeholder="请选择所在省" border type="select" v-model="address" @click="shengshow = true"  />
						</view>
					</view>
					<view class="in-item u-m-t-16">
						<view class="in-text">联系人电话</view>
						<view class="input-div">
							<u-input placeholder="请输入联系电话" border v-model="phone" maxlength="11" />
						</view>
					</view>
					<view class="in-item u-m-t-16">
						<view class="in-text">咨询内容</view>
						<view class="input-div">
							<u-input placeholder="请输入咨询的问题~" border type="textarea" height="200" v-model="content" />
						</view>
					</view>
					<view class="u-m-t-20 flex">
						<image class="suo" src="../../static/img/home/c2.png" mode=""></image>
						<view class="u-m-l-14 font_12_999">
							找李律为您保障隐私，手机号已加密
						</view>
					</view>
				</view>
				<view class="in-div in-div2 u-m-t-18">
					<view class="t-title">
						承接全国业务
					</view>
					<view class="yewu-div flex flex_wrap u-m-t-4">
						<view class="yewu-item u-m-r-16" v-for="(item,index) in selector" :key="index">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="in-div in-div2 u-m-t-18">
					<view class="flex flex_sb">
						<view class="t-title">
							服务说明
						</view>
						<view class="flex font_12_666" @click="smShow=true">
							详细说明
							<u-icon name="arrow-right" color="#666" size="24"></u-icon>
						</view>
					</view>
					
					<view class="u-m-t-16">
						<view class="font_14_666 fusm">
							{{richText.description}}
						</view>
						<image class="fw-img u-m-t-32" src="../../static/img/home/c3.png" mode=""></image>
						<view class="u-m-t-24 font_12_999">
							温馨提示：律师拨通后，15分钟不限次追问
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<u-picker mode="selector" confirm-color="#20C064" :range="selector" v-model="show"  range-key="name"
			@confirm="showconfirm"></u-picker>
		<u-picker mode="selector" confirm-color="#20C064" :range="selector2" v-model="show2"  range-key="name"
			@confirm="showconfirm2"></u-picker>
		<u-select v-model="shengshow" mode="single-column" :list="addressList" @confirm="regionconfirm1" value-name="id" label-name="name"></u-select>
		<u-popup v-model="smShow" mode="center" border-radius="32">
			<view class="po-bikan">
				<view class="bk-title text_center">
					电话咨询服务说明
				</view>
				<view class="bk-content u-m-t-32">
					<rich-text :nodes="richText.content"></rich-text>
				</view>
				<view class="bk-btn u-m-t-32 u-p-t-32"  @click="smShow=false">
					我知道了
				</view>
			</view>
		</u-popup>
		
		
		<view class="" style="width: 100%;height: 120rpx;"></view>
		<view class="zixun-btn" @click="$u.throttle(zixun, 1000)">
			<image class="zx-b-img" src="../../static/img/home/c4.png" mode=""></image>
			<view class="">
				立即咨询
			</view>
		</view>
		
		<couponList :couponShow="couponShow" @shiyong="shiyong" type="1"></couponList>
	</view>
</template>

<script>
	import couponList from '../../components/couponList/couponList.vue';
	import {formatRichText} from '@/static/richText.js'
	var statusBarHeight = (uni.getSystemInfoSync().statusBarHeight * 2);
	export default {
		components: {
			couponList
		},
		data() {
			return {
				couponShow:false,
				yhq_id:'',
				statusBarHeight: statusBarHeight,
				config: {
					maxSlot: true,
					back: false,
					barPlaceholder: false,
					backgroundColor: [0, '#FFFFFF'],
					slideBackgroundColor: [1, '#FFFFFF']
				},
				tabbar: '',
				smShow:false,
				richText:[],
				type:'',
				show:false,
				selector: [],
				selector2: [],
				type2:'',
				show2:false,
				
				serve_id:'',
				phone:'',
				content:'',
				price:'0',
				
				task_id:'',
				
				addressList:[],
				shengshow:false,
				address:'',
				province:''
			}
		},
		onPageScroll(e) {
			// 重点，用到滑动切换必须加上
			this.$refs.hxnb.pageScroll(e);
		},
		onLoad() {
			
			this.lingyuList()
			this.getshuoming()
			this.getprice()
			this.getaddrerss()
		},
		methods: {
			shiyong(e){
				if(e){
					
					if(this.price*1 < e.man_price*1){
						uni.showToast({
							title: "优惠券无效，不足满减金额",
							icon: "none"
						});
						this.yhq_id = ''
						// this.price = ((this.price*1) - (e.jian_price*1)).toFixed(2)
					}else{
						this.yhq_id = e.id
						this.price = ((this.price*1) - (e.jian_price*1)).toFixed(2)
					}
				}else{
					this.yhq_id = ''
				}
				// this.yhq_id = e
				this.couponShow = false
				console.log(e)
			},
			getaddrerss(){
				this.$api({
					url: '/getChinaArea',
					method: 'get',
				}).then(res => {
					if (res.code == 1) {
						this.addressList = res.data
					}
				})
			},
			regionconfirm1(e) {
				this.address = e[0].label
				this.province = e[0].value
				
				
			},
			getshuoming() {
				this.$api({
					url: '/getPage',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						id:42
					},
				}).then(res => {
					if (res.code == 1) {
						this.richText = res.data
					}
				})
			},
			getprice() {
				this.$api({
					url: '/setting',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
					},
				}).then(res => {
					if (res.code == 1) {
						this.price = res.data.phone_order
					}
				})
			},
			lingyuList(){
				this.$api({
					url: '/lawyer/getTags',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						type:2 //类型：1=擅长领域，2=服务类型
					},
				}).then(res => {
					if (res.code == 1) {
						this.selector = res.data
					}
				})
				this.$api({
					url: '/lawyer/getTags',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						type:1 //类型：1=擅长领域，2=服务类型
					},
				}).then(res => {
					if (res.code == 1) {
						this.selector2 = res.data
					}
				})
			},
			zixun(){
				
				if (!this.serve_id) {
					uni.showToast({
						title: "请选择服务类型",
						icon: "none"
					});
					return
				}
				if (!this.task_id) {
					uni.showToast({
						title: "请选择案件类型",
						icon: "none"
					});
					return
				}
				if (!this.province) {
					uni.showToast({
						title: "请选择所在省",
						icon: "none"
					});
					return
				}
				if (!this.$u.test.mobile(this.phone)) {
					uni.showToast({
						title: "请输入正确的手机号",
						icon: "none"
					});
					return
				}
				if (!this.content) {
					uni.showToast({
						title: "请输入内容",
						icon: "none"
					});
					return
				}
				this.$api({
					url: '/user/release',
					method: 'post',
					data: {
						token: uni.getStorageSync("token"),
						serve_id:this.serve_id,
						task_id:this.task_id,
						province:this.province,
						phone:this.phone,
						content:this.content,
						price:this.price,
						type:2 ,//2电话咨询 3图文咨询
						yhq_id:this.yhq_id
					},
				}).then(res => {
					if (res.code == 1) {
						
						if(res.data.if_free==1){
							uni.redirectTo({
								url: "/pages/index/paySuccess?list="+JSON.stringify(res.data)
							})
							return
						}
						
						
						
						uni.requestPayment({
							provider: "wxpay",
							appid: res.data.pay_info.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
							timeStamp: res.data.pay_info.timeStamp, // 时间戳（单位：秒）
							paySign: res.data.pay_info.paySign, //签名
							nonceStr: res.data.pay_info.nonceStr, // 随机字符串
							package: res.data.pay_info.prepay_id, // 固定值
							signType: res.data.pay_info.signType, // 签名算法，这里用的 MD5/RSA 签名
							success(res2) {
								if (res2.errMsg == "requestPayment:ok") {
									// uni.showToast({
									// 	title: "购买成功",
									// 	icon: "none"
									// });
									uni.redirectTo({
										url: "/pages/index/paySuccess?list="+JSON.stringify(res.data)
									})
								}
							},
							fail(e) {
								this.couponShow = true
								console.log('支付失败支付失败支付失败', e)
								uni.showToast({
									title: "支付失败",
									icon: "none"
								});
							}
						})
						
						
					}
				})
			},
			
			showconfirm(e) {
				this.type = this.selector[e].name
				this.task_id = this.selector[e].id 
				console.log(e)
			},
			showconfirm2(e) {
				this.type2 = this.selector2[e].name
				this.serve_id = this.selector2[e].id 
				console.log(e)
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav_wrap {
		width: 100%;
		position: relative;

		.back_wrap {
			position: absolute;
			left: 24rpx;

			.diqu {
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				margin: 0 12rpx;
			}

			.dq-icon {
				width: 28rpx;
				height: 34rpx;
			}
		}

		.page_title {
			width: 100vw;
			text-align: center;
			font-weight: bold;
		}
	}

	.main-div {
		position: relative;
		width: 100%;

		.main-bg {
			width: 100%;
			height: 540rpx;
			position: absolute;
			top: 0;
			z-index: 0;
		}

		.zhanwei {
			width: 100%;
		}
	}

	.m-d {
		position: relative;
		padding-top: 88rpx;
		z-index: 2;
		padding-bottom: 40rpx;

		.dh-t {
			font-weight: bold;
			font-size: 60rpx;
			color: #0B0B0B;
			line-height: 76rpx;
		}

		.c1-img {
			width: 28rpx;
			height: 28rpx;
		}
	}
	
	.jisu{
		width: 686rpx;
		// height: 152rpx;
		background-color: rgba(0, 0, 0, 0.7);
		border-radius: 16rpx 16rpx 0 0;
		margin: 0 auto;
		padding: 26rpx 28rpx;
		color: #FFFFFF;
		.num{
			font-weight: bold;
			font-size: 52rpx;
			color: #FFFFFF;
		}
		.xs-t{
			width: 116rpx;
			height: 40rpx;
			background: #F62B10;
			border-radius: 8rpx 0rpx 20rpx 0rpx;
			text-align: center;
			line-height: 40rpx;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}

	.in-div{
		width: 686rpx;
		// height: 682rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 16rpx 16rpx;
		margin: 0 auto;
		padding: 36rpx 40rpx;
		
		&2{
			border-radius:16rpx;
			padding: 24rpx;
		}
		
		.in-item{
			
			.in-text{
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
			}
			.input-div{
				width: 606rpx;
				// height: 80rpx;
				// background: #FFFFFF;
				// border-radius: 8rpx 8rpx 8rpx 8rpx;
				// border: 2rpx solid #DDDDDD;
				margin-top: 16rpx;
				// padding: 0 26rpx;
			}
		}
		.suo{
			width: 20rpx;
			height: 24rpx;
		}
		
		.t-title{
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
		}
		.yewu-div{
			
			.yewu-item{
				background: #F8F7F7;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 2rpx solid #D9D9D9;
				font-size: 24rpx;
				color: #9A9A9A;
				padding: 4rpx 8rpx;
				margin-top: 20rpx;
			}
		}
		.fusm{
			font-size: 28rpx;
			color: #666666;
			line-height: 44rpx;
		}
		.fw-img{
			width: 640rpx;
			height: 114rpx;
		}
	}
	
	.zixun-btn{
		width: 686rpx;
		height: 92rpx;
		background: linear-gradient( 180deg, #FA2D2D 0%, #F40000 100%);
		border-radius: 46rpx 46rpx 46rpx 46rpx;
		position: fixed;
		bottom: 40rpx;
		left: 32rpx;
		text-align: center;
		line-height: 92rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		z-index: 5;
		
		.zx-b-img{
			position: absolute;
			bottom: 0;
			right: 186rpx;
			width: 72rpx;
			height: 64rpx;
		}
	}
	
	
	.po-bikan {
		padding: 40rpx 34rpx;
		background: #FFFFFF;
		width: 690rpx;
	
		.bk-title {
			font-weight: bold;
			font-size: 40rpx;
			color: #222222;
		}
	
		.bk-content {
			font-size: 28rpx;
			color: #666666;
			line-height: 48rpx;
		}
	
		.bk-btn {
			font-size: 32rpx;
			color: #4088E5;
			text-align: center;
			border-top: 2rpx solid #EDEDED;;
		}
	}
</style>